/**
 * 下拉框组件
 */
define(function(require,exports,module){
    var $ = require("jquery");
    var template = require("tmpl");
    var source =  '<span class="select-border js-select">'
                +    '<input class="select-text" type="text" readonly placeholder="" />'
                +    '<span class="select-icon"><i class="select-icon-arrow"></i></span>'
                +  '</span>'
                +   '<div class="select-sub">'
                +    '<div class="search-box-border js-search" style="display:none;">'
                +      '<input type="text" class="search-box" style="padding-left:3px;" />'
                +   '</div>'
                +   '<div class="js-item-list">'
                +    '{{each list as item i}}'
                +        '<a href="javascript:void(0);" data-value="{{item.value}}">{{item.text}}</a>'
                +    '{{/each}}'
                +   '</div>'
                +  '</div>';
    var render = template.compile(source);
  
    //初始化搜索
    function initSearch($js_search,list){
        var $input = $js_search.find("input");
        $input.on("click",function(e){
            e.stopPropagation();
        });
        $input.on("keyup",function(e){
            setTimeout(function(){
                recreateItemList($(e.target).parent().next(".js-item-list"),$.trim(e.target.value),list);
            },100);
        });
    }
    //重新生成下拉列表的值
    function recreateItemList($item_list,filter,list){
        var data = [];
        $.each(list,function(i,item){
            if(item.text.indexOf(filter) != -1){
                data.push(item);
            }
        });
        var str = "";
        $.each(data,function(i,item){
            str += '<a href="javascript:void(0);" data-value="' + item.value + '">' + item.text + '</a>';
        });
        $item_list.html(str);
    }
    
    $.select = function(config){
        var id = config["id"];
        if(!id){
            alert("请配置id节点");
            return false;
        }
        var list = config["list"] || [];
        var callback = config["callback"] || function(){};
        var html = render({list: list});
        var $el = $("#" + id);
        $el.html(html).addClass("select");
        
        $el.find(".js-select").on("click",function(e){
            e.stopPropagation();
            $(this).parent().toggleClass("select-on"); //显示弹层
        });
        //隐藏弹层
        $(document).click(function(e){
            $(".select").removeClass("select-on"); 
        });
        
        $el.on("click",".select-sub a",function(e){
            e.stopPropagation();
            var $wrap = $(this).closest(".select");
            $wrap.removeClass("select-on");
            var context = config["context"] || this;
            var data = {
                text:$(this).text(),
                value:$(this).data("value")
            };
            $wrap.find(".select-text").val(data.text);
            $wrap.data("text",data.text).data("value",data.value);
            $wrap = null;
            callback.call(context,data);
        });
        if(config["enableSearch"]){
            var $js_search = $el.find(".js-search");
            $js_search.show();
            initSearch($js_search,list);
        }
        var items = $el.find(".select-sub a");
        if(typeof config["defValue"] != "undefined"){
            items.filter(function(){
                return $(this).data("value") == config["defValue"];
            }).trigger("click");
        }else if(config["autoSelect"] === true){
           items.first().trigger("click"); //选中第一个 
        }
    };
    module.exports = $;
});